<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label {
            text-align: right;
            display: inline-block;
            width: 74px;
        }
        .username_span {
            display: none;
        }
    </style>
</head>

<body>
    <form class="form">
        <label>名字</label>
        <input type="text" class="name">
        <br><br>
        <label>登录名</label>
        <input type="text" class="username">
        <span class="username_span">不能为空</span>
        <br><br>
        <label>密码</label>
        <input type="text" class="password">
        <br><br>
        <label>确认密码</label>
        <input type="text" class="password2">
        <br><br>
        <label>电子邮箱</label>
        <input type="text" class="email">
        <br><br>
        <input type="submit"  value="提交">
        <input type="reset" value="重置">
    </form>

    <script>
        var form = document.querySelector('.form');

        form.onsubmit = function() {
            var name = document.querySelector('.name').value;
            var username = document.querySelector('.username').value;
            var password = document.querySelector('.password').value;
            var password2 = document.querySelector('.password2').value;
            var email = document.querySelector('.email').value;
            // 不能为空
            if(!name) {
                // 报错提示
                document.querySelector('.name').style.borderColor = 'red';
                return false
            }
            if(!username) {
                document.querySelector('.username_span').style.display = 'inline-block'
                return false
            }

            // 密码不能为空 且长度至少6位
            if(!password || password.length < 6){
                return false
            }
            // 不能为空 且两次一致
            if(!password2 || password != password2){
                return false
            }
            // 必须包含@还有.
            if(!email.includes('@') || !email.includes('.')) {
                return false
            }
            return true
        }
    </script>
</body>

</html>